<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="account" label="用户名" />
            <el-table-column prop="createTime" label="注册时间" />
            <el-table-column prop="level" label="等级" />
        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>



<script>
const data = Array.from(Array(114), (v, i) => {
    return {
        account: "uaa" + (i + 1),
        createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)),
        level: Math.ceil(Math.random() * 10)
    }
})
console.log('data', data);

export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            pageSizes: [5, 10]
            
        }
    },
    methods: {
        getData(page, pageSize) {
            this.tableData = data.slice((page - 1) * pageSize, page * pageSize);
            this.total = data.length
        },
        handleSizeChange(val) {
            console.log('handleSizeChange', val);
            this.pageSize = val
            this.getData(this.currentPage, val)
        },
        handleCurrentChange(val) {
            console.log('handleCurrentChange', val);
            this.currentPage = val
            this.getData(val, this.pageSize)
        }
    },
    created() {
        this.getData(1, this.pageSize)
    }
}
</script>